<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogFlag"
      class="avue-dialog avue-dialog--top"
      width="45%"
      @close="cancel"
    >
      <div class="action-log" style="margin: 10px 0;">
        <el-collapse v-if="dataForm.length > 0">
          <el-collapse-item v-for="(item, index) in dataForm" :name="index">
            <template slot="title">
              <div class="title" style="width: 100%;">
                <el-row>
                  <el-col :span="15">
                    <el-tag>{{ item.actionName }}</el-tag>
                  </el-col>
                  <el-col :span="6">
                    <span>
                      <span v-if="item.actionType == 1">
                        <el-tag type="success">
                          成功：{{ item.successCount }}
                        </el-tag>
                        <el-tag type="danger">
                          失败：{{ item.failCount }}
                        </el-tag>
                      </span>
                      <span v-if="item.actionType == 3">
                        <el-tag type="success" v-if="item.dataList[0].outputStatus == 1">
                          <dict-tag :type="DICT_TYPE.MESSAGE_STATUS" :value="item.dataList[0].outputStatus"/>
                        </el-tag>
                        <el-tag type="danger" v-if="item.dataList[0].outputStatus == 0">
                          <dict-tag :type="DICT_TYPE.MESSAGE_STATUS" :value="item.dataList[0].outputStatus"/>
                        </el-tag>
                      </span>
                      <span v-if="item.actionType == 2">
                        <el-tag type="success" v-if="item.dataList[0].outputStatus == 1">
                          <dict-tag :type="DICT_TYPE.MESSAGE_STATUS" :value="item.dataList[0].outputStatus"/>
                        </el-tag>
                        <el-tag type="danger" v-if="item.dataList[0].outputStatus == 0">
                          <dict-tag :type="DICT_TYPE.MESSAGE_STATUS" :value="item.dataList[0].outputStatus"/>
                        </el-tag>
                      </span>
                    </span>
                  </el-col>
                </el-row>
              </div>


            </template>
            <!--     发送消息       -->
            <div v-if="item.actionType == 1" style="padding: 0 15px; margin-bottom: 10px;font-size: 14px">
              <el-row>
                <el-col :span="8" style="text-align: center">
                  <span style="color: #646a73">推送人</span>
                </el-col>
                <el-col :span="8" style="text-align: center">
                  <span style="color: #646a73">推送状态</span>

                </el-col>
                <el-col :span="8" style="text-align: center">
                  <span style="color: #646a73">发送时间</span>
                </el-col>
              </el-row>
              <el-row v-for="(messageItem, messageIndex) in item.dataList" :key="messageIndex">
                <el-col :span="8" style="text-align: center">
                  <span style="color: #1677ff;">{{ messageItem.pushUser }}</span>
                </el-col>
                <el-col :span="8" style="text-align: center">
                  <span style="color: #1677ff;">
                    <dict-tag :type="DICT_TYPE.MESSAGE_STATUS" :value="messageItem.messageStatus"/>
                  </span>
                </el-col>
                <el-col :span="8" style="text-align: center">
                  <span style="color: #1677ff;">
                    <span>{{ parseTime(messageItem.createTime) }}</span>
                  </span>
                </el-col>
              </el-row>
            </div>

          </el-collapse-item>
        </el-collapse>
        <el-empty v-else description="暂无数据"></el-empty>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {getRecodeLog} from "@/api/warning/warning-record";

export default {
  name: "warningLog",
  data() {
    return {
      title: '动作日志',
      dialogFlag: false,
      dataForm: [],
      warningConfid: {},
    }
  },
  methods: {
    init(row) {
      this.dialogFlag = true;
      getRecodeLog(row.configId, row.warningTag).then(res => {
        this.$set(this, 'dataForm', res.data);
        this.dataForm = res.data;
      })
    },
    cancel() {
      this.dialogFlag = false;
      this.dataForm = {};
      this.$emit('restOnLoad');
    },
  }
}
</script>

<style scoped>
.successStatus {
  color: #67C23A;
}

.failStatus {
  color: #F56C6C;
}

.action-log ::v-deep .el-collapse-item__header {
  //font-size: 16px;
  //font-weight: 700;
}

.product-form ::v-deep .el-form-item__label {
  color: #3f4448;
  font-weight: 400;
}

.product-form ::v-deep .el-textarea__inner {
  resize: none;
  min-height: 111.6px !important;
}
</style>
